<template>
    <div class="login">
        <div class="left">
            <img src="../../assets/LoginImages/login.png" alt="login">
        </div>
        <div class="right">
            <div class="main">
                <img src="../../assets/LoginImages/huanying.jpg" style="width:40px">
                <h1>欢迎登录</h1>
                <div class="form">
                    <el-input class="input" v-model="account" placeholder="请输入账号(手机号码或邮箱)" clearable />
                    <el-input
                        class="input"
                        v-model="password"
                        type="password"
                        placeholder="请输入密码"
                        show-password
                    />
                    <el-checkbox v-model="checked" style="align-self: left;margin-left: 10%;">我已阅读并同意<a href="javascript:;">《用户隐私政策》</a></el-checkbox>
                    <el-button class="btn" type="primary" style="align-self: center;" @click="login">登录</el-button>
                </div>
                <span>忘记密码请联系管理员</span>
            </div>
        </div>
    </div>
</template>
  
  <script lang="ts">
  import { defineComponent,ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage  } from 'element-plus'
  import { useStore } from 'vuex';
//   import {Axios} from '@/plugins/axiosInstance'
  
  export default defineComponent({
    name: '',
    components: {
      
    },
    setup(){
        // const account = ref(JSON.parse(localStorage.getItem('userInfo')!) ? JSON.parse(localStorage.getItem('userInfo')!).account : '')
        const account = ref(JSON.parse(localStorage.getItem('userInfo')!) ? JSON.parse(localStorage.getItem('userInfo')!).account : '')
        // const password = ref(JSON.parse(localStorage.getItem('userInfo')!) ? JSON.parse(localStorage.getItem('userInfo')!).password : '')
        const password = ref(JSON.parse(localStorage.getItem('userInfo')!) ? JSON.parse(localStorage.getItem('userInfo')!).password : '')
        const checked = ref(false)
        const router = useRouter()
        const store = useStore()
        // const mapmutations = mapMutations('myname',['test'])
        /* const data = computed(()=>{
           return store.state.userInfo
        })
        console.log(data.value); */
        
        // store.commit('myname/xxx')
        /* onMounted(()=>{
            Axios.post('/resident',{type:"total"})
            .then(res => console.log(res.data))
            .catch(err => console.log(err))
        }) */
        
        
        // console.log(store.state.userInfo.account);//admin
        
        const login = ()=>{
            if(!account.value || !password.value){
                ElMessage({
                  message: '账号或密码不能为空！',
                  type: 'warning',
                })
            }else if(!checked.value){
                ElMessage({
                  message: '请勾选同意后登录',
                  type: 'warning',
                })
            }else if(account.value !== store.state.userInfo.account || password.value !== store.state.userInfo.password){
                ElMessage({
                  message: '账号或密码错误',
                  type: 'error',
                })
            }else{
                ElMessage({
                  message: '登录成功！',
                  type: 'success',
                })
                localStorage.setItem('userInfo',JSON.stringify({account:account.value,password:password.value}))
                setTimeout(() => {
                    router.push({path:"/home"})
                }, 1000)  
            } 
        }
        return {
            account,
            password,
            checked,
            login,
            // ...mapmutations
        }
    }
  });
  </script>
  <style lang="less">
  .login{
    width: 1240px;
    height: 660px;
    border: 1px solid red;
    margin: 30px auto;
    display: flex;
    .left{
        width: 50%;
        height: 100%;
        background-color: rgb(41,132,248);
        position: relative;
        img{
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    }
    .right{
        width: 50%;
        text-align: center;
        height: 100%;
        position: relative;
        .main{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            padding: 10px;
            // border: 1px solid green;
            .form{
                display: flex;
                justify-content: space-around;
                flex-direction: column;
                align-content: center;
                height: 300px;
                width: 480px;
                text-align: center;
                .input{
                    height: 50px;
                    width: 80%;
                    align-self: center;
                }
            }
            .btn{
                width: 80%;
                height: 50px;
            }
            span{
                font-size: 13px;
                color: #CCC;
            }
        }
        h1{
            font-size: 28px;
            color: #333;
        }
    }
  }
  a{
    text-decoration: none;
  }
  </style>
  